src/components/base-ui/News/recommendbook_element.tsx-44-57 (1)

44-57: Add accessible name + pressed state to the like toggle.

Icon-only button is unlabeled for screen readers.

♿ Suggested fix

         <button
           type="button"
           onClick={(e) => {
             e.stopPropagation();
             onLikeChange(!liked);
           }}
           className="w-[24px] h-[24px] shrink-0"
+          aria-label={liked ? 'Unlike' : 'Like'}
+          aria-pressed={liked}
         >

src/components/base-ui/Search/search_bookresult.tsx-72-101 (1)

72-101: Icon-only buttons need accessible names (and pressed state for like).

Screen readers get unlabeled controls. Add aria-label and aria-pressed for the toggle.

♿ Suggested fix

           <button
             type="button"
             onClick={(e) => {
               e.stopPropagation();
               onLikeChange(!liked);
             }}
             className="w-[24px] h-[24px] shrink-0"
+            aria-label={liked ? 'Unlike' : 'Like'}
+            aria-pressed={liked}
           >
             <Image
               src={liked ? '/red_heart.svg' : '/gray_heart.svg'}
               alt=""
               width={24}
               height={24}
             />
           </button>

           <button
             type="button"
             onClick={(e) => {
               e.stopPropagation();
               onPencilClick?.();
             }}
             className="
               flex w-[60px] h-[60px] px-[10px] py-[4.167px]
               flex-col justify-center items-center gap-[8.333px] shrink-0
               rounded-full bg-[color:var(--primary_2)]
             "
+            aria-label="Edit"
           >
             <Image src="/pencil_icon.svg" alt="" width={20} height={20} />
           </button>

src/components/base-ui/News/recommendbook_element.tsx-29-33 (1)

29-33: Make the clickable card keyboard-accessible.

A clickable div without role/tabIndex and keyboard handling blocks keyboard-only users.

♿ Suggested fix

     <div
-      onClick={onCardClick}
+      onClick={onCardClick}
+      onKeyDown={(e) => {
+        if (!onCardClick) return;
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onCardClick();
+        }
+      }}
+      role={onCardClick ? 'button' : undefined}
+      tabIndex={onCardClick ? 0 : undefined}
       className={`relative flex w-[244px] h-[320px] p-[12px] flex-col justify-end items-start gap-[10px] overflow-hidden ${
         onCardClick ? 'cursor-pointer' : ''
       } ${className}`}
     >

src/components/base-ui/Search/search_recommendbook.tsx-44-57 (1)

44-57: Add accessible name + pressed state to the like toggle.

Icon-only button is unlabeled for screen readers.

♿ Suggested fix

         <button
           type="button"
           onClick={(e) => {
             e.stopPropagation();
             onLikeChange(!liked);
           }}
           className="w-[24px] h-[24px] shrink-0"
+          aria-label={liked ? 'Unlike' : 'Like'}
+          aria-pressed={liked}
         >

src/components/base-ui/Search/search_bookresult.tsx-37-43 (1)

37-43: Add keyboard access for the clickable card container.

The div is clickable but not keyboard-focusable, blocking keyboard users. Use role/tabIndex and handle Enter/Space when onCardClick is provided.

♿ Suggested fix

-    <div
-      onClick={onCardClick}
+    <div
+      onClick={onCardClick}
+      onKeyDown={(e) => {
+        if (!onCardClick) return;
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onCardClick();
+        }
+      }}
+      role={onCardClick ? 'button' : undefined}
+      tabIndex={onCardClick ? 0 : undefined}
       className={[
         'flex w-full max-w-[1040px] p-[20px] justify-center items-start gap-[24px] rounded-[8px] bg-[color:var(--White,`#FFF`)] shadow-[0_2px_4px_rgba(0,0,0,0.05)] border border-[color:var(--Subbrown_4,`#E0E0E0`)]',
         onCardClick ? 'cursor-pointer' : '',
         className,
       ].join(' ')}
     >

src/components/base-ui/Search/search_recommendbook.tsx-29-33 (1)

29-33: Make the clickable card keyboard-accessible.

A clickable div without role/tabIndex and keyboard handling blocks keyboard-only users.

♿ Suggested fix

     <div
-      onClick={onCardClick}
+      onClick={onCardClick}
+      onKeyDown={(e) => {
+        if (!onCardClick) return;
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onCardClick();
+        }
+      }}
+      role={onCardClick ? 'button' : undefined}
+      tabIndex={onCardClick ? 0 : undefined}
       className={`relative flex w-[332px] h-[436px] p-[16px] flex-col justify-end items-start gap-[12px] overflow-hidden ${
         onCardClick ? 'cursor-pointer' : ''
       } ${className}`}
     >

src/lib/api/ApiError.ts-1-11 (1)

1-11: Replace any with unknown for type safety.

ESLint flags the use of any on lines 3 and 5. Using unknown provides better type safety while still allowing flexible response data.

🔧 Proposed fix

 export class ApiError extends Error {
   code: string;
-  response?: any;
+  response?: unknown;
 
-  constructor(message: string, code: string = "UNKNOWN_ERROR", response?: any) {
+  constructor(message: string, code: string = "UNKNOWN_ERROR", response?: unknown) {
     super(message);
     this.name = "ApiError";
     this.code = code;
     this.response = response;
   }
 }

src/components/base-ui/Join/steps/SignupComplete/useSignupComplete.ts-11-24 (1)

11-24: Remove debug artifacts before merging.

The console.log statements in all handlers are debug artifacts. Additionally, the commented-out router.push calls in handleSearchMeeting and handleCreateMeeting suggest incomplete implementation.

🧹 Proposed cleanup

   const handleSearchMeeting = () => {
-    console.log("Search Meeting clicked");
-    // router.push('/meeting/search');
+    router.push('/meeting/search');
   };
 
   const handleCreateMeeting = () => {
-    console.log("Create Meeting clicked");
-    // router.push('/meeting/create');
+    router.push('/meeting/create');
   };
 
   const handleUseWithoutMeeting = () => {
-    console.log("Use Without Meeting clicked");
     router.push("/");
   };

src/components/base-ui/BookStory/bookstory_choosebook.tsx-1-2 (1)

1-2: Add 'use client' directive for interactive component.

This component has an onClick handler (line 57) which requires client-side JavaScript. Without the 'use client' directive, the button click may not work as expected in Next.js App Router.

💡 Suggested fix

+'use client';
+
 import React from 'react';
 import Image from 'next/image';

src/components/base-ui/home/home_bookclub.tsx-32-32 (1)

32-32: Use Next.js Image component for consistency and optimization.

Native <img> is used here while the rest of the file uses next/image. Also, the path should have a leading slash for proper public asset resolution.

💡 Suggested fix

-          <img src="logo2.svg" alt="로고" className="mx-auto mb-4 mt-[118px]" />
+          <Image src="/logo2.svg" alt="로고" width={100} height={100} className="mx-auto mb-4 mt-[118px]" />

src/components/base-ui/Join/JoinInput.tsx-60-84 (1)

60-84: Associate the label with the input and label the toggle button.

A <span> doesn’t create an accessible label relationship, and the toggle button has no accessible name/state. Use a <label htmlFor> tied to the input and add aria-label/aria-pressed on the toggle. Ensure callers pass id or name when label is provided.

♿ Proposed fix

-const JoinInput: React.FC<JoinInputProps> = ({
-  label,
-  hideLabel,
-  className,
-  type,
-  ...props
-}) => {
+const JoinInput: React.FC<JoinInputProps> = ({
+  label,
+  hideLabel,
+  className = "",
+  type,
+  ...props
+}) => {
+  const inputId = props.id ?? props.name;
   const [showPassword, setShowPassword] = useState(false);
   const isPasswordType = type === "password";
   const inputType = isPasswordType
     ? showPassword
       ? "text"
       : "password"
     : type;

   return (
     <div className="flex flex-col items-start w-full gap-[12px]">
       {label && (
-        <span
+        <label
+          htmlFor={inputId}
           className={`text-[`#7B6154`] font-sans text-[20px] font-semibold leading-[135%] tracking-[-0.02px] ${
             hideLabel ? "sr-only" : ""
           }`}
         >
           {label}
-        </span>
+        </label>
       )}
       <div className="relative w-full">
         <input
+          id={inputId}
           type={inputType}
           className={`w-full h-[44px] px-[16px] py-[12px] bg-white border rounded-[8px] outline-none ${className} ${
             isPasswordType ? "pr-[40px]" : ""
           }`}
           {...props}
         />
         {isPasswordType && (
           <button
             type="button"
             onClick={() => setShowPassword(!showPassword)}
+            aria-label={showPassword ? "비밀번호 숨기기" : "비밀번호 표시"}
+            aria-pressed={showPassword}
             className="absolute top-1/2 right-[12px] transform -translate-y-1/2 text-[`#BBB`] hover:text-[`#8D8D8D`]"
           >
             {showPassword ? <EyeOffIcon /> : <EyeIcon />}
           </button>
         )}
       </div>
     </div>
   );
};

src/app/globals.css-1-1 (1)

1-1: Pin the Pretendard import to a specific version instead of @latest.

Using @latest causes non-deterministic builds and can introduce unexpected breaking changes. Replace with the current stable version (v1.3.9):

`@import` url("https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css");

Consider using .min.css as shown above for better performance.

src/utils/groupMapper.ts-1-1 (1)

1-1: Import types from the canonical source.

Types are imported from @/app/groups/page but should be imported from @/types/groups/groups where Category and ParticipantType are canonically defined. Importing from a page component creates a coupling to that component and may cause circular dependency issues.

🔧 Proposed fix

-import { Category, ParticipantType } from "@/app/groups/page";
+import { Category, ParticipantType } from "@/types/groups/groups";

src/components/base-ui/Group-Search/search_groupsearch.tsx-6-13 (1)

6-13: Duplicate Category type definition.

This Category type is already defined in src/types/groups/groups.ts. Duplicating type definitions can lead to inconsistencies if one is updated but not the other. Import from the canonical source instead.

♻️ Proposed fix

 'use client';

 import Image from 'next/image';
 import { useEffect, useRef, useState } from 'react';
+import { Category } from '@/types/groups/groups';

-export type Category =
-  | '전체'
-  | '대학생'
-  | '직장인'
-  | '온라인'
-  | '동아리'
-  | '모임'
-  | '대면';
+// Re-export for consumers that import from this file
+export type { Category } from '@/types/groups/groups';

src/components/base-ui/Join/JoinLayout.tsx-13-15 (1)

13-15: Fixed width will break on mobile/tablet viewports.

The inner container uses a fixed w-[766px] width, which will cause horizontal overflow on screens smaller than 766px. Given the PR objectives mention responsive UI for tablet (768px) and mobile (375px), this needs responsive handling.

🐛 Suggested fix for responsive layout

-      <div className="flex flex-col items-center w-[766px] px-[56px] py-[99px] gap-[100px] rounded-[8px] bg-White">
+      <div className="flex flex-col items-center w-full max-w-[766px] px-4 sm:px-[56px] py-12 sm:py-[99px] gap-12 sm:gap-[100px] rounded-[8px] bg-White">

src/lib/api/endpoints.ts-1-2 (1)

1-2: Production URL as fallback is risky for development.

If NEXT_PUBLIC_API_URL is not set (e.g., missing .env.local), development environments will silently hit the production API, potentially causing unintended data mutations or auth confusion.

🔧 Safer alternatives

Option 1: Fail explicitly if env var is missing

-export const API_BASE_URL =
-  process.env.NEXT_PUBLIC_API_URL || "https://api.checkmo.co.kr/api";
+const envUrl = process.env.NEXT_PUBLIC_API_URL;
+if (!envUrl) {
+  throw new Error("NEXT_PUBLIC_API_URL environment variable is not set");
+}
+export const API_BASE_URL = envUrl;

Option 2: Use localhost as safe fallback

 export const API_BASE_URL =
-  process.env.NEXT_PUBLIC_API_URL || "https://api.checkmo.co.kr/api";
+  process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001/api";

src/components/base-ui/Join/steps/PasswordEntry/usePasswordEntry.ts-6-15 (1)

6-15: Derive isValid directly instead of using useEffect + useState.

The static analysis correctly flags that calling setState within an effect for derived state causes unnecessary re-renders. Since isValid is purely derived from password and confirmPassword, use useMemo or compute it inline. Also, password.length > 0 is redundant since the regex already requires 6+ characters.

♻️ Proposed fix using useMemo

-import { useState, useEffect } from "react";
+import { useState, useMemo } from "react";

 export const usePasswordEntry = () => {
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
-  const [isValid, setIsValid] = useState(false);

-  useEffect(() => {
-    // 6-12자, 영문 최소 1자, 특수문자 최소 1자
-    const passwordRegex = /^(?=.*[a-zA-Z])(?=.*[!@#$%^&*]).{6,12}$/;
-    const isPasswordValid = passwordRegex.test(password);
-    const isMatch = password === confirmPassword;
-
-    setIsValid(isPasswordValid && isMatch && password.length > 0);
-  }, [password, confirmPassword]);
+  // 6-12자, 영문 최소 1자, 특수문자 최소 1자
+  const isValid = useMemo(() => {
+    const passwordRegex = /^(?=.*[a-zA-Z])(?=.*[!@#$%^&*]).{6,12}$/;
+    return passwordRegex.test(password) && password === confirmPassword;
+  }, [password, confirmPassword]);

src/app/groups/groupSearchDummy.ts-4-4 (1)

4-4: ClubSummary interface includes a reason method that dummy objects cannot satisfy.

The ClubSummary interface (page.tsx, lines 19-29) declares reason(clubId: number, reason: string): void; as a method. The dummyClubs array in groupSearchDummy.ts defines plain object literals that omit this method, violating the interface contract.

This is a design issue—the reason method is never called on club objects. Instead, reason is handled as a separate callback parameter in event handlers like onSubmitApply(). Methods should not belong in data transfer objects. Remove the reason method from the interface and pass the callback separately where needed, or create a separate handler type for apply actions.

src/components/base-ui/Login/useLoginForm.tsx-78-82 (1)

78-82: Social login path is still a TODO

The PR objectives mention OAuth, but this handler only logs. Please implement or hide/disable the option until it’s ready.

If you want, I can draft the OAuth redirect flow or open a tracking issue.

src/components/base-ui/Join/steps/useEmailVerification.ts-36-40 (1)

36-40: Block verification after the timer expires

handleVerify only checks code length, so a user can still verify after timeout. Guard with timeLeft.

🔧 Suggested fix

  const handleVerify = () => {
-   if (isCodeValid) {
+   if (isCodeValid && timeLeft !== null && timeLeft > 0) {
      setIsVerified(true);
      setShowToast(true);
    }
  };

src/components/base-ui/Join/steps/ProfileSetup/ProfileSetup.tsx-39-45 (1)

39-45: Nickname becomes immutable after duplicate check

disabled={isNicknameChecked} prevents users from correcting typos, while the hook’s reset-on-change can never fire. This blocks signup if they want to edit.

🔧 Suggested fix

-                <JoinInput
-                  value={nickname}
-                  onChange={handleNicknameChange}
-                  disabled={isNicknameChecked}
+                <JoinInput
+                  value={nickname}
+                  onChange={handleNicknameChange}
                   placeholder="닉네임을 입력해주세요(최대 20글자)"
                   className="border-[`#EAE5E2`] placeholder-[`#BBB`] text-[14px] font-normal"
                 />

src/components/base-ui/Join/steps/useEmailVerification.ts-13-18 (1)

13-18: Reset verification state when the email changes

If the user edits the email after verifying, the existing isVerified/code/timer state carries over and can incorrectly mark a new email as verified.

🔧 Suggested fix

  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setEmail(value);
    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    setIsEmailValid(emailRegex.test(value));
+   setIsVerified(false);
+   setVerificationCode("");
+   setIsCodeValid(false);
+   setTimeLeft(null);
+   setShowToast(false);
  };

src/components/base-ui/Login/useLoginForm.tsx-47-65 (1)

47-65: Only proceed on true success and avoid leaking auth payloads

The authService.login() returns a LoginResponse object without throwing on failure (indicated by isSuccess: false), so the try-catch does not intercept failed authentications. This means lines 59–64 (state update, toast, and navigation) execute unconditionally even when isSuccess is false. Additionally, line 49 logs the entire response payload, creating potential information leakage. The cookie also lacks an explicit root path.

🔧 Suggested fix

       // Service Layer 호출
       const data = await authService.login(form);
-
-      console.log("로그인 성공:", data);
-      // 1. Token Storage (Secure Cookie)
-      if (data.isSuccess && data.result?.accessToken) {
-        Cookies.set("accessToken", data.result.accessToken, {
-          secure: true,
-          sameSite: "strict",
-        });
-      }
+      if (!data.isSuccess || !data.result?.accessToken) {
+        throw new ApiError("LOGIN_FAILED", "LOGIN_FAILED", data);
+      }
+
+      // 1. Token Storage (Secure Cookie)
+      Cookies.set("accessToken", data.result.accessToken, {
+        secure: true,
+        sameSite: "strict",
+        path: "/",
+      });

src/app/groups/page.tsx-19-29 (1)

19-29: reason should not be a method signature in a data interface.

The ClubSummary interface defines reason(clubId: number, reason: string): void which is a method signature. This appears to be a mistake—data interfaces should not contain callback methods. This will cause issues when creating objects that conform to this interface, as they would need to implement a method.

Either remove this line or, if a reason field is needed, define it as a property:

🔧 Proposed fix

 export interface ClubSummary {
-  reason(clubId: number, reason: string): void;
   clubId: number;
   name: string;
   profileImageUrl?: string | null;
   category: number[];
   public: boolean;
   applytype: ApplyType;
   region: string;
   participantTypes: ParticipantType[];
 }

src/lib/api/client.ts-1-1 (1)

1-1: API_BASE_URL is imported but never used.

The base URL is imported but not prepended to requests. Either remove the unused import or prepend it to requestUrl.

🔧 Proposed fix: prepend base URL

-  let requestUrl = url;
+  let requestUrl = `${API_BASE_URL}${url}`;

src/lib/api/client.ts-59-64 (1)

59-64: 401 handler does not interrupt the request flow.

After detecting a 401, the code logs out and shows a toast but then continues to parse and potentially return the response. This can cause callers to receive and process an unauthorized response as valid data, leading to confusing behavior.

🔧 Proposed fix: throw after 401 handling

     // [Resilience] Interceptor: 401 Unauthorized Handling
     if (response.status === 401) {
       console.warn("Session expired. Logging out...");
       useAuthStore.getState().logout();
       toast.error("세션이 만료되었습니다. 다시 로그인해주세요.");
-      // 여기서 throw를 해서 흐름을 끊어주는 것이 안전할 수 있음
+      throw new Error("Unauthorized: Session expired");
     }

tsconfig.json-35-39 (1)

35-39: Remove stale checkmo/ prefixed paths from include array.

The include array contains checkmo/.next/types/**/*.ts and checkmo/.next/dev/types/**/*.ts (lines 35-36), but the checkmo/ directory does not exist in the repository. These are stale paths and should be removed. The .next/ paths on lines 38-39 are correct for Next.js projects and should be kept (the .next/ directory is generated at build time).

Remove stale paths

   "include": [
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
-    "checkmo/.next/types/**/*.ts",
-    "checkmo/.next/dev/types/**/*.ts",
     "**/*.mts",
     ".next/types/**/*.ts",
     ".next/dev/types/**/*.ts"
   ],

src/components/base-ui/BookStory/bookstory_text.tsx-29-50 (1)

29-50: Accessibility concern: Tab key interception blocks keyboard navigation.

Preventing the default Tab behavior means keyboard-only users cannot tab out of the textarea to reach other form elements. Consider allowing Tab navigation when no text is selected, or use a modifier key (e.g., Ctrl+Tab or Escape then Tab) for indentation.

💡 Alternative: Only indent when there's a selection, otherwise allow normal Tab

 const handleDetailKeyDown = useCallback(
   (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key !== 'Tab') return;

     const el = e.currentTarget;
     const start = el.selectionStart ?? 0;
     const end = el.selectionEnd ?? 0;

+    // Allow normal tab navigation when no text is selected
+    if (start === end && !e.shiftKey) return;
+
     e.preventDefault();

     const insert = '  ';
     const next = detail.slice(0, start) + insert + detail.slice(end);

src/components/base-ui/Search/search_bookresult.tsx-66-66 (1)

66-66: Fix likely class typo (flex1 → flex-1).

This appears to be a utility class typo and can break layout.

🩹 Suggested fix

-          <p className="flex1 h-full text-[color:var(--Gray_4,`#8D8D8D`)] body_1_2 line-clamp-6">
+          <p className="flex-1 h-full text-[color:var(--Gray_4,`#8D8D8D`)] body_1_2 line-clamp-6">

src/components/base-ui/Join/steps/SignupComplete/useSignupComplete.ts-6-9 (1)

6-9: Replace hardcoded dummy data with actual user data.

The hook uses hardcoded values instead of retrieving actual user data. This should integrate with the auth store or fetch user profile data after signup completion.

Would you like me to help integrate this with the Zustand auth store to retrieve actual user data?

src/components/common/Toast.tsx-24-31 (1)

24-31: Add ARIA live region attributes for screen-reader announcements.
Right now the toast won’t be announced reliably by assistive tech.

🛠️ Suggested fix

-    <div
+    <div
+      role="status"
+      aria-live="polite"
+      aria-atomic="true"
       className={`absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 inline-flex justify-center items-center h-[88px] pl-[138px] pr-[137px] bg-[`#31111D99`] rounded-[24px] backdrop-blur-[1px] transition-opacity duration-300 ${
         isVisible ? "opacity-100" : "opacity-0"
       }`}
     >

src/components/base-ui/Profile/others_profile.tsx-88-100 (1)

88-100: Expose toggle state via aria-pressed.
This is a toggle button, so assistive tech should get the pressed state.

🛠️ Suggested fix

-        <button
+        <button
           type="button"
           onClick={() => onToggleSubscribe(!isSubscribed)}
+          aria-pressed={isSubscribed}
           className={[
             'flex w-[532px] h-[48px] px-[16px] py-[12px] justify-center items-center gap-[10px] rounded-[8px]',
             'subhead_4_1 whitespace-nowrap',
             isSubscribed
               ? 'bg-[color:var(--Subbrown_4,`#EAE5E2`)] text-[color:var(--primary_3,`#5E4A40`)]'
               : 'bg-[color:var(--Primary_1,`#7B6154`)] text-[color:var(--White,`#FFF`)]',
           ].join(' ')}
         >

src/components/base-ui/Join/steps/SignupComplete/SignupComplete.tsx-35-41 (1)

35-41: Use a descriptive alt for the profile image.
Helps accessibility and aligns with user-specific content.

🛠️ Suggested fix

-            <Image
-              src={profileImage}
-              alt="Profile"
+            <Image
+              src={profileImage}
+              alt={`${nickname} 프로필`}
               width={138}
               height={138}
               className="object-cover w-full h-full"
             />

src/components/base-ui/home/list_subscribe.tsx-25-25 (1)

25-25: Remove console.log before production.

Debug logging should not remain in production code. Replace with actual subscription logic or a no-op placeholder.

💡 Suggested fix

-            onSubscribeClick={() => console.log('subscribe', u.id)}
+            onSubscribeClick={() => {
+              // TODO: Implement subscription logic
+            }}

src/components/base-ui/home/home_bookclub.tsx-14-19 (1)

14-19: Inconsistent threshold vs. preview count.

The component triggers collapse mode when count >= 5, but then displays 6 items when collapsed. This creates an edge case where having exactly 5 groups would show 5 items with a "전체보기" toggle that does nothing meaningful.

Consider aligning these values:

💡 Suggested fix

-  const isMany = count >= 5;
+  const isMany = count > 6;

   const [open, setOpen] = useState(false);

   // 접힘: 6개만 / 펼침: 전체
   const displayGroups = isMany && !open ? groups.slice(0, 6) : groups;

src/components/base-ui/home/list_subscribe_element.tsx-24-32 (1)

24-32: Mismatched sizes prop value.

The Image container is 32x32px but sizes="42px" is specified. This should match the actual rendered size for optimal image loading.

💡 Suggested fix

         <Image
           src={profileSrc}
           alt={`${name} profile`}
           fill
           className="object-cover"
-          sizes="42px"
+          sizes="32px"
           priority={false}
         />

src/components/base-ui/BookStory/bookstory_card.tsx-18-30 (1)

18-30: Add validation for invalid date strings.

The timeAgo function doesn't handle invalid ISO strings, which would cause new Date(iso) to return Invalid Date and result in NaN-based calculations returning unexpected output like "NaN일 전".

💡 Suggested defensive fix

 function timeAgo(iso: string) {
+  const date = new Date(iso);
+  if (isNaN(date.getTime())) return '';
-  const diff = Date.now() - new Date(iso).getTime();
+  const diff = Date.now() - date.getTime();
   const minutes = Math.floor(diff / 60000);

src/components/base-ui/Group-Search/search_mybookclub.tsx-69-85 (1)

69-85: Conflicting CSS classes: grid and flex-col.

Line 71 combines grid grid-cols-1 with flex-col. These are mutually exclusive layout modes—flex-col has no effect when display: grid is applied. Remove flex-col.

🔧 Proposed fix

             className={[
-              "grid grid-cols-1 t:grid-cols-2 d:grid-cols-1 flex-col gap-2",
+              "grid grid-cols-1 t:grid-cols-2 d:grid-cols-1 gap-2",
               open && showToggle ? "overflow-y-auto pr-1" : "",
             ].join(" ")}

src/components/base-ui/Group-Search/search_mybookclub.tsx-62-65 (1)

62-65: Empty Tailwind class h-[] appears to be incomplete.

The h-[] class on line 62 is an empty arbitrary value that has no effect. This looks like incomplete code or a typo. Either remove it or specify an intended height value.

🔧 Proposed fix

-        <div className="h-[] flex items-center justify-center py-4 t:py-10 d:py-20">
+        <div className="flex items-center justify-center py-4 t:py-10 d:py-20">

src/components/auth/AuthProvider.tsx-10-21 (1)

10-21: Token hydration sets incomplete user state without validation.

The current implementation trusts the cookie token existence without validating it server-side. This means:

1. An expired or tampered token will set isLoggedIn: true until the first API call fails
2. user.email is empty, which may cause issues if other components expect it when isLoggedIn is true

The TODO comment indicates this is intentional for now, but consider prioritizing the /api/auth/me call to validate the token and fetch complete user data on hydration.

Would you like me to help implement the token validation flow using /api/auth/me?

src/components/base-ui/Login/LoginModal.tsx-58-69 (1)

58-69: Email input should use type="email".

Using type="text" loses browser validation, mobile keyboard optimization, and autocomplete capabilities for email fields.

Proposed fix

               <input
                 name="email"
-                type="text"
+                type="email"
                 value={form.email}
                 onChange={handleChange}
                 placeholder="이메일"

src/app/groups/groupSearchDummy.ts-7-17 (1)

7-17: Duplicate IDs in dummy data will cause React key collisions.

The mydummyGroup array contains duplicate id values ('1', '2', '3', '4' each appear twice). When this data is rendered with id as a React key, you'll get key collision warnings and potential rendering bugs.

Proposed fix

 export const mydummyGroup: GroupSummary[] = [
   { id: '1', name: '모임1' },
   { id: '2', name: '모임2' },
   { id: '3', name: '모임3' },
   { id: '4', name: '모임4' },
-  { id: '1', name: '모임11241' },
-  { id: '2', name: '모임51212' },
-  { id: '3', name: '모임125153' },
-  { id: '4', name: '모임12512514' },
+  { id: '5', name: '모임11241' },
+  { id: '6', name: '모임51212' },
+  { id: '7', name: '모임125153' },
+  { id: '8', name: '모임12512514' },
 ];

src/components/base-ui/home/NewsBannerSlider.tsx-17-17 (1)

17-17: Fixed dimensions break responsiveness.

The container uses hardcoded h-[424px] w-[1040px], which won't adapt to tablet (768px) or mobile (375px) breakpoints mentioned in the PR objectives.

Suggested responsive approach

-    <div className="relative h-[424px] w-[1040px] overflow-hidden rounded-[10px]">
+    <div className="relative aspect-[1040/424] w-full max-w-[1040px] overflow-hidden rounded-[10px]">

src/components/base-ui/Login/LoginModal.tsx-136-141 (1)

136-141: Same accessibility issue: "회원가입하러가기" should be a button.

The signup link in the footer has the same accessibility problem as the find account links.

Proposed fix

           <p className={styles.footerText}>
             아직 회원이 아니신가요?{" "}
-            <span className={styles.footerLink} onClick={onSignUp}>
+            <button type="button" className={styles.footerLink} onClick={onSignUp}>
               회원가입하러가기
-            </span>
+            </button>
           </p>

src/components/base-ui/Login/LoginModal.tsx-91-99 (1)

91-99: Interactive <span> elements are not keyboard accessible.

Using <span> with onClick for "아이디 찾기" and "비밀번호 찾기" lacks keyboard support (no focus, no Enter/Space activation). Use <button> elements instead.

Proposed fix

               <div className={styles.findAccount}>
-                <span className={styles.link} onClick={onFindAccount}>
+                <button type="button" className={styles.link} onClick={onFindAccount}>
                   아이디 찾기
-                </span>
+                </button>
                 <span className={styles.divider}>|</span>
-                <span className={styles.link} onClick={onFindAccount}>
+                <button type="button" className={styles.link} onClick={onFindAccount}>
                   비밀번호 찾기
-                </span>
+                </button>
               </div>

src/app/(main)/page.tsx-23-25 (1)

23-25: LoginModal is missing onFindAccount and onSignUp handlers.

According to the LoginModal component signature, it accepts onFindAccount and onSignUp optional props. Currently, clicking "아이디 찾기", "비밀번호 찾기", or "회원가입하러가기" links will have no effect since these handlers aren't provided.

Consider wiring up placeholder handlers or disabling those UI elements until the functionality is implemented.

src/components/base-ui/Join/JoinButton.tsx-18-23 (1)

18-23: Secondary variant lacks disabled styling.

The primary variant has explicit disabled styling, but secondary does not. A disabled secondary button will remain visually unchanged, which may confuse users.

🐛 Proposed fix

   const variants = {
     primary: disabled
       ? "bg-[`#DADADA`] text-[`#8D8D8D`] cursor-not-allowed"
       : "bg-[`#7B6154`] text-[`#FFF`]",
-    secondary: "bg-[`#EAE5E2`] text-[`#5E4A40`] border border-[`#D2C5B6`]",
+    secondary: disabled
+      ? "bg-[`#F5F5F5`] text-[`#BBBBBB`] border border-[`#E0E0E0`] cursor-not-allowed"
+      : "bg-[`#EAE5E2`] text-[`#5E4A40`] border border-[`#D2C5B6`]",
   };

src/components/base-ui/Group-Search/search_clublist/search_club_category_tags.tsx-50-56 (1)

50-56: Typo: item-center should be items-center.

Line 51 has a typo in the Tailwind class name. item-center is not a valid Tailwind utility; it should be items-center.

🐛 Proposed fix

           <span
             key={n}
             className={[
-              'h-[21px] my-auto py-[1px] inline-flex item-center justify-center body_1_2',
+              'h-[21px] my-auto py-[1px] inline-flex items-center justify-center body_1_2',
               'rounded-[8px] text-White',
               short ? 'w-[44px]' : 'px-2',
               getBgByCategory(n),
               className,
             ].join(' ')}
           >

src/components/base-ui/Join/steps/ProfileImage/InterestCategorySelector.tsx-29-33 (1)

29-33: Add explicit button type to prevent future form submission issues

The button currently lacks an explicit type attribute. While the component is not currently rendered inside a <form>, adding type="button" is a best practice to prevent accidental form submission if the component is ever used in a form context in the future.

🔧 Suggested fix

             <button
               key={category}
+              type="button"
+              aria-pressed={isSelected}
               onClick={() => onToggle(category)}
               className={`w-[122px] h-[44px] flex justify-center items-center rounded-[400px] text-[14px] leading-[145%] tracking-[-0.014px] transition-colors ${

src/components/base-ui/Join/steps/TermsItem.tsx-33-41 (1)

33-41: Make checkbox icons decorative for screen readers

The label already conveys state; these images should be marked as decorative using an empty alt="" attribute to prevent screen readers from announcing them.

🔧 Suggested fix

-          <Image
-            src="/CheckBox_No.svg"
-            alt="Unchecked"
-            width={24}
-            height={24}
-          />
+          <Image
+            src="/CheckBox_No.svg"
+            alt=""
+            width={24}
+            height={24}
+          />
...
-          <Image src="/CheckBox_Yes.svg" alt="Checked" width={24} height={24} />
+          <Image
+            src="/CheckBox_Yes.svg"
+            alt=""
+            width={24}
+            height={24}
+          />

src/app/groups/create/page.tsx-411-416 (1)

411-416: Missing maxLength attribute for activity area input.

Similar to the description textarea, this input's placeholder says "40자 제한" but no maxLength={40} is set.

🔧 Proposed fix

                     <input
                       value={activityArea}
                       onChange={(e) => setActivityArea(e.target.value)}
                       placeholder="활동 지역을 입력해주세요 (40자 제한)"
+                      maxLength={40}
                       className="..."
                     />

src/components/base-ui/Join/steps/EmailVerification/EmailVerification.tsx-30-30 (1)

30-30: Fixed width may break on mobile viewports.

The container uses w-[766px] which exceeds mobile viewport width (375px per PR objectives). Consider using responsive classes like w-full max-w-[766px] or adding breakpoint variants.

🔧 Suggested responsive fix

-    <div className="relative flex flex-col items-center w-[766px] px-[56px] py-[99px] bg-white rounded-[8px]">
+    <div className="relative flex flex-col items-center w-full max-w-[766px] px-4 sm:px-[56px] py-10 sm:py-[99px] bg-white rounded-[8px]">

src/app/groups/create/page.tsx-195-216 (1)

195-216: Missing maxLength attribute despite placeholder indicating limit.

The placeholder text states "500자 제한" but there's no maxLength={500} attribute to enforce the limit. Users can currently enter unlimited text.

🔧 Proposed fix

                     <textarea
                       value={clubDescription}
                       onChange={(e) => {
                         setClubDescription(e.target.value);
                         autoResize(e.currentTarget);
                       }}
                       onInput={(e) => autoResize(e.currentTarget)}
                       placeholder="자유롭게 입력해주세요! (500자 제한)"
+                      maxLength={500}
                       className="..."
                     />

src/app/groups/create/page.tsx-473-539 (1)

473-539: Avoid using array index as key for dynamic lists.

Using key={idx} for the links list can cause incorrect React reconciliation when rows are removed. If the user deletes the first row, the second row's state may not update correctly.

🔧 Proposed fix: use a stable unique ID

-type SnsLink = { label: string; url: string };
+type SnsLink = { id: number; label: string; url: string };

+const nextLinkId = useRef(1);

-const [links, setLinks] = useState<SnsLink[]>([{ label: "", url: "" }]);
+const [links, setLinks] = useState<SnsLink[]>([{ id: 0, label: "", url: "" }]);

 const addLinkRow = () => {
-  setLinks((prev) => [...prev, { label: "", url: "" }]);
+  setLinks((prev) => [...prev, { id: nextLinkId.current++, label: "", url: "" }]);
 };

// Then in JSX:
-{links.map((it, idx) => (
-  <div key={idx} ...>
+{links.map((it) => (
+  <div key={it.id} ...>

src/components/base-ui/Join/steps/ProfileImage/useProfileImage.ts-49-56 (1)

49-56: Memory leak: old blob URL not revoked when replaced.

The cleanup function only runs on unmount (or when profileImage changes), but at that point it revokes the new value. When a user uploads a second image, the previous blob URL is never revoked.

🔧 Proposed fix using a ref to track the previous blob URL

-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";

...

+  const prevBlobRef = useRef<string | null>(null);
+
   const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (file) {
       const imageUrl = URL.createObjectURL(file);
       setProfileImage(imageUrl);
     }
   };

   // 메모리 누수 방지를 위한 cleanup
   useEffect(() => {
+    // Revoke previous blob URL when profileImage changes
+    if (prevBlobRef.current && prevBlobRef.current.startsWith("blob:")) {
+      URL.revokeObjectURL(prevBlobRef.current);
+    }
+    prevBlobRef.current = profileImage;
+
     return () => {
       if (profileImage && profileImage.startsWith("blob:")) {
         URL.revokeObjectURL(profileImage);
       }
     };
   }, [profileImage]);